import React, { useEffect } from 'react';
import './index.less';
import { Button, Input, Form } from 'antd';
import {
  ProForm,
  ProFormDependency,
  ProFormList,
  ProFormText,
} from '@ant-design/pro-components';
import axios from 'axios';
import { Select, InputNumber, Radio } from 'antd';
import { history } from 'umi';
import { CloseCircleOutlined, SmileOutlined } from '@ant-design/icons';
import dayjs from 'dayjs';
import customParseFormat from 'dayjs/plugin/customParseFormat';
dayjs.extend(customParseFormat);
const range = (start, end) => {
  const result = [];
  for (let i = start; i < end; i++) {
    result.push(i);
  }
  return result;
};

export default function Newapp() {
  const { Search, TextArea } = Input;
  // eslint-disable-next-line arrow-body-style
  const disabledDate = (current) => {
    // Can not select days before today and today
    return current && current < dayjs().endOf('day');
  };
  const disabledDateTime = () => ({
    disabledHours: () => range(0, 24).splice(4, 20),
    disabledMinutes: () => range(30, 60),
    disabledSeconds: () => [55, 56],
  });
  // 搜索
  const onSearch = (values) => {
    console.log(values);
  };
  // 表单添加
  const onFinish = (values) => {
    console.log(values);
    axios.post('http://127.0.0.1:7777/mbom/addaddlist', values).then((res) => {
      history.push('/home/production/list');
    });
  };
  return (
    <>
      <div className="add">
        {/* 基本信息 */}
        <div className="tables">
          <Form
            onFinish={onFinish}
            name="basic"
            labelCol={{
              span: 8,
            }}
            wrapperCol={{
              span: 16,
            }}
            style={{
              width: '100%',
            }}
            initialValues={{
              remember: true,
            }}
            // onFinish={onFinish}
          >
            <div className="topBut">
              <Button>保存</Button>
              <Button htmlType="submit">保存且新增</Button>
              <Button>草稿箱</Button>
              <span className="spans"></span>
              <Button>导入</Button>
            </div>
            <h2>物料清单</h2>
            <table border="1">
              <thead>
                <tr>
                  <td colspan="4">基本信息</td>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>
                    <span>
                      <span style={{ color: 'red' }}>*</span> 物料清单主题：
                    </span>
                    <Form.Item
                      name="mbomtitle"
                      style={{
                        width: 200,
                        display: 'inline-block',
                      }}
                    >
                      <Input style={{ width: '200px' }} />
                    </Form.Item>
                  </td>
                  <td>
                    <span>物料清单编号：</span>
                    <Form.Item
                      name="mbomnum"
                      style={{
                        width: 200,
                        display: 'inline-block',
                      }}
                    >
                      <Input
                        style={{ width: '200px' }}
                        placeholder="保存后自动生成"
                        readOnly
                      />
                    </Form.Item>
                  </td>
                  <td>
                    <span> 制单人员：</span>
                    <Form.Item
                      name="cmaker"
                      style={{
                        width: 200,
                        display: 'inline-block',
                      }}
                    >
                      <Input style={{ width: '200px' }} placeholder="张晓雪" />
                    </Form.Item>
                  </td>

                  <td></td>
                </tr>

                <tr style={{ height: '100%' }}>
                  <td colspan="4" style={{ height: '100%' }}>
                    <span style={{ lineHeight: '120px' }}>备注:</span>
                    <Form.Item
                      name="remarks"
                      style={{
                        display: 'inline-block',
                        lineHeight: '120px',
                      }}
                    >
                      <TextArea
                        style={{
                          height: '120px',
                          width: 'calc(100vw - 485px)',
                        }}
                      />
                    </Form.Item>
                  </td>
                </tr>
              </tbody>
            </table>
            <table border="1" style={{ marginTop: '20px' }}>
              <thead>
                <tr>
                  <td colspan="4">父件信息</td>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>
                    <span>
                      <span style={{ color: 'red' }}>*</span> 产品名称：
                    </span>
                    <Form.Item
                      name="Productname"
                      style={{
                        width: 200,
                        display: 'inline-block',
                      }}
                    >
                      <Search style={{ width: '200px' }} />
                    </Form.Item>
                  </td>
                  <td>
                    <span>产品编码：</span>
                    <Form.Item
                      name="Productnum"
                      style={{
                        width: 200,
                        display: 'inline-block',
                      }}
                    >
                      <Input style={{ width: '200px' }} />
                    </Form.Item>
                  </td>
                  <td>
                    <span>规格型号：</span>
                    <Form.Item
                      name="Model"
                      style={{
                        width: 200,
                        display: 'inline-block',
                      }}
                    >
                      <Input style={{ width: '200px' }} />
                    </Form.Item>
                  </td>

                  <td>
                    <span>单位：</span>
                    <Form.Item
                      name="unit"
                      style={{
                        width: 200,
                        display: 'inline-block',
                      }}
                    >
                      <Input style={{ width: '200px' }} />
                    </Form.Item>
                  </td>
                </tr>

                <tr>
                  <td>
                    <span>
                      <span style={{ color: 'red' }}>*</span> 数量：
                    </span>
                    <Form.Item
                      name="number"
                      style={{
                        width: 200,
                        display: 'inline-block',
                      }}
                    >
                      <InputNumber
                        size="large"
                        style={{ width: '200px' }}
                        min={1}
                        max={100000}
                      />
                    </Form.Item>
                  </td>
                  <td>
                    <span>产品角色：</span>
                    <Form.Item
                      name="Productrol"
                      style={{
                        width: 200,
                        display: 'inline-block',
                      }}
                    >
                      <Select style={{ marginTop: '1px', width: '200px' }}>
                        <Select.Option value="自制">自制</Select.Option>
                        <Select.Option value="委外">委外</Select.Option>
                      </Select>
                    </Form.Item>
                  </td>
                  <td>
                    <span>工艺流程：</span>
                    <Form.Item
                      name="process"
                      style={{
                        width: 200,
                        display: 'inline-block',
                      }}
                    >
                      <Search style={{ width: '200px' }} />
                    </Form.Item>
                  </td>

                  <td>
                    <span>损耗率(%)：</span>
                    <Form.Item
                      name="lossrate"
                      style={{
                        width: 200,
                        display: 'inline-block',
                      }}
                    >
                      <InputNumber style={{ width: '200px' }} />
                    </Form.Item>
                  </td>
                </tr>
              </tbody>
            </table>

            {/* 入库明细 */}
            <div className="rkmxbox">
              <ProForm>
                <ProFormList
                  name="labels"
                  label={
                    <div>
                      子件信息
                      <Button>增行</Button>
                      <Button>删行</Button>
                      <Button>导入</Button>
                      <Button>导入模板</Button>
                    </div>
                  }
                  style={{ fontSize: '1.5rem' }}
                  initialValue={[
                    {
                      name: '1111',
                    },
                  ]}
                  copyIconProps={{
                    Icon: SmileOutlined,
                    tooltipText: '复制此行到末尾',
                  }}
                  // copyIconProps={false}
                  deleteIconProps={{
                    Icon: CloseCircleOutlined,
                    tooltipText: '不需要这行了',
                  }}
                  alwaysShowItemLabel
                >
                  <ProForm.Group>
                    <ProFormText width="xs" name="function" label="产品名称" />
                    <ProFormText width="xs" name="gfunction" label="产品编号" />
                    <ProFormText width="xs" name="gfunction" label="规格型号" />
                    <ProFormText width="xs" name="gfunction" label="单位" />
                    <ProFormText width="xs" name="gfunction" label="产品比例" />
                    <ProFormText width="xs" name="gfunction" label="数量" />
                    <ProFormText width="xs" name="gfunction" label="产品角色" />
                    <ProFormText width="xs" name="gfunction" label="工艺流程" />
                    <ProFormText width="xs" name="gfunction" label="损耗率" />
                    <ProFormText width="xs" name="gfunction" label="领料方式" />
                    <ProFormText width="xs" name="gfunction" label="备注" />
                  </ProForm.Group>
                </ProFormList>
              </ProForm>
            </div>
            <div className="fujian">
              <table border={1}>
                <tr>
                  <td colspan={14}>
                    附件 &nbsp; <Button>批量上传</Button>{' '}
                  </td>
                </tr>
                <tr>
                  <td colSpan={6}> 文件名称</td>
                  <td>文件大小</td>
                  <td>上传人</td>
                  <td colSpan={2}>上传时间</td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                </tr>
                <tr style={{ backgroundColor: 'white' }}>
                  <td colspan={14} style={{ height: '4rem' }}></td>
                </tr>
              </table>
            </div>
          </Form>
        </div>
      </div>
    </>
  );
}
